<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/goods-buy.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购买宝贝</h1>
		</header>
		<div class="mui-content" id="main">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" style="padding: 0;">
					<img class="pic" :src="goods_img_path+pictureArray[0]" />
					<p class="des">{{des}}</p>
					<div class="priceBox">
						<span class="price">&yen;{{price}}</span>
						<span class="originalPrice">&yen;{{originalPrice}}</span>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 20px;">
				<li class="mui-table-view-cell address" id="address">
					<label>收货地址</label>
					<i class="mui-icon mui-icon-arrowright"></i>
					<div class="addressbox">
						<p>{{receivePerson}}{{receivePhone}}</p>
						<p>{{address}}</p>

					</div>

					<!--<a class="mui-navigate-right">Item 2</a>-->
				</li>
				<li class="mui-table-view-cell">
					<span>运费</span>
					<span class="freight">&yen;{{postage}}</span>
				</li>

			</ul>
		</div>
		<footer class="mui-bar mui-bar-tab" style="height: 35px;">
			<span class="tit">实付款:</span>
			<span class="price" id="price"></span>
			<button class="buyBtn" id="confirm">确定</button>
		</footer>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/const.js"></script>
		<script type="text/javascript" src="../js/request.js"></script>
		<script type="text/javascript" src="../js/goods_service.js"></script>
		<script type="text/javascript" src="../js/order_service.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			mui.init()

			function getDefaultData() {
				return {
					id: '',
					title: '',
					des: '',
					goodsType: '',
					phone: '',
					campus: '',
					createTimeText: '',
					userface: '',
					nick_name: '',
					pictureArray: [],
					price: '',
					originalPrice: '',
					goods_img_path: GOODS_IMG_PATH + '/',
					userface_path: USER_FACE_PATH + '/',
					receivePhone: '',
					address: '',
					receivePerson: '',
					postage: '',
				}
			}

			//vue对象
			var data_detail = new Vue({
				el: '#main',
				data: getDefaultData(),
				methods: {
					resetData: function() { //重置数据
						Object.assign(this.$data, getDefaultData());
					},
				}
			});

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var id = self.goodsId;
				//添加hide事件
				self.addEventListener('hide', function(e) {
					window.scrollTo(0, 0); //滚到顶部
					data_detail.resetData(); //数据重置
				}, false);
				plus.nativeUI.showWaiting('加载中', {
					width: '100px',
					height: '100px'
				});
				//获取接口数据
				var res = goodsService.findGoodWihtAddress(id);
				plus.nativeUI.closeWaiting();
				data_detail.des = res.data.des;
				data_detail.nick_name = res.data.nick_name;
				data_detail.userface = res.data.userface;
				data_detail.createTimeText = res.data.createTimeText;
				data_detail.pictureArray = res.data.pictureArray;
				data_detail.campus = res.data.campus;
				data_detail.price = res.data.price;
				data_detail.originalPrice = res.data.originalPrice;
				data_detail.id = res.data.id;
				data_detail.receivePerson = res.data.receivePerson;
				data_detail.address = res.data.address;
				data_detail.receivePhone = res.data.receivePhone;
				data_detail.postage = res.data.postage;
				document.getElementById("price").innerHTML = '&yen;' + (res.data.price + res.data.postage);
			});

			var address = document.getElementById("address");
			//监听点击事件
			address.addEventListener("tap", function() {
				mui.openWindow({
					id: 'select-address.html',
					url: 'select-address.html',
				});
			});
			window.addEventListener("updateAddress", function(event) {
				var address = event.detail.address;
				data_detail.receivePerson = address.receivePerson;
				data_detail.address = address.province + address.city + address.area + address.detailedAddress;
				data_detail.receivePhone = address.receivePhone;

			});

			//点击确定，生成订单
			var confirmBtn = document.getElementById("confirm");
			confirmBtn.addEventListener("tap", function() {
				var order = new Object();
				order.address = data_detail.address;
				order.goodsId = data_detail.id;
				if(data_detail.address === null) { //未选择收货地址
					plus.nativeUI.toast("亲，您还未选择收货地址哟");
					return;
				}
				order.receivePhone = data_detail.receivePhone;
				order.receivePerson = data_detail.receivePerson;
				order.payment = data_detail.price + data_detail.postage;
				var res = orderService.create_order(order);
				if(res.resultCode == REQUEST_SUCCESS_CDOE) {
					plus.nativeUI.toast("订单生成成功，请点击我要付款继续操作");
					var list = plus.webview.currentWebview().opener();
					mui.fire(list, 'goodsId', {
						id: data_detail.id
					});
					mui.currentWebview.close();
				} else {
					plus.nativeUI.toast(res.msg);
				}

			})
		</script>
	</body>

</html>